<script setup>
import { RouterView } from 'vue-router'
import UserSettingsNav from '@/components/UserSettingsNav.vue';
</script>
<template>
    <div class="us">
        <h2>User Settings</h2>
        <UserSettingsNav class="us_nav" />
        <RouterView class="us_content" />
        <RouterView class="us_content-helper" name="helper" />
    </div>
</template>

<style>
.us {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'header header'
                         'nav content'
                         'nav helper';
}
h2 {
    grid-area: header;
}
.us_nav {
    grid-area: nav;
    border: 1px dotted;
    padding: .5em;
    margin-right: .75em;
}
.us_content {
    grid-area: content;
}
.us_content-helper {
    grid-area: helper;
}

</style>